<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Men Calçados - Carrinho Passo 1</title>

<link rel="stylesheet" type="text/css" href="_css/style.css" />
<link rel="stylesheet" type="text/css" href="_css/skin.css" />

<link rel="stylesheet" type="text/css" href="_css/produto.css" />

<script type="text/javascript" src="_js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="_js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="_js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="_js/coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript">
	
	var theInt = null;
	var $crosslink, $navthumb;
	var curclicked = 0;
	
	theInterval = function(cur){
		clearInterval(theInt);
		
		if( typeof cur != 'undefined' )
			curclicked = cur;
		
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
			$(".stripNav ul li a").eq(curclicked).trigger('click');
		
		theInt = setInterval(function(){
			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
			$(".stripNav ul li a").eq(curclicked).trigger('click');
			curclicked++;
			if( 6 == curclicked )
				curclicked = 0;
			
		}, 3000);
	};
	
	$(function(){
		
		$("#main-photo-slider").codaSlider();
		
		$navthumb = $(".nav-thumb");
		$crosslink = $(".cross-link");
		
		$navthumb
		.click(function() {
			var $this = $(this);
			theInterval($this.parent().attr('href').slice(1) - 1);
			return false;
		});
		
		theInterval();
	});
</script>


</head>

<body>
	<div class="header">
		<div class="contentHeader">
        	<a href=""><div class="logo">&nbsp;</div></a>
            <div class="centralAtendimento">
            	<h2>CENTRAL DE ATENDIMENTO</h2>
                <div class="linha">
                    <img src="_images/telefone_header.png" alt="" />
                    <p>4004-0101</p>
                </div>
                <div class="linha">
                    <img src="_images/contato_reader.png" alt="" />
                    <p class="contatoHeader">contato@mencalcados.com.br</p>
                </div>
                <br />
                <div class="linha">
                    <h3>Seja Bem Vindo Visitante.</h3>
                </div>
            </div>
            <div class="areaCliente">
            	<div class="linhaCliente">
                    <img src="_images/carrinho_header.png" alt="" />
                    <a href=""><h2>MEU CARRINHO</h2></a>
                </div>
                <div class="linhaCliente">
                    <img src="_images/pedidos_header.png" alt="" />
                    <a href=""><p>MEUS PEDIDOS</p></a>
                </div>
                <div class="linhaCliente">
                	<img src="_images/dados_header.png" alt="" />
                    <a href=""><p>MEUS DADOS</p></a>
                </div>
                <div class="linhaCliente">
                	<img src="_images/cadastrar_header.png" alt="" />
                    <a href=""><p>CADASTRE-SE</p></a>
                </div>
            </div>
        </div>
    </div>
    <div class="menu">
    	<div class="tamanho1000">
            <ul id="contentMenu">
                <li><a href="#">PÁGINA PRINCIPAL</a></li>
                <li><a href="#">QUEM SOMOS</a></li>
                <li><a href="#">CONTATO</a></li>
                <div class="clear"></div>
            </ul>
            <div class="busca">
                <div class="linhaBusca">
                    <input type="text" class="campoHeader" value="Login" />
                    <p>(cadastre-se)</p>
                    <div class="clear"></div>
                </div>
                <div class="linhaBusca">
                    <input type="password" class="campoHeader" value="Sua Senha" />
                    <p>(esqueci a senha)</p>
                    <div class="clear"></div>                
                </div>
                <input type="submit" class="botaoHeader" value="" />
            </div>
            <div class="clear"></div>
		</div>            
    </div>
    <div class="tamanho1000">
		
        <div class="sideBar">    	
            <div class="menuLateral">
                <div class="buscaLateral">
                    <h2>PESQUISE POR PRODUTOS</h2>
                    <input type="text" class="campoHeader" value="" />
                    <input type="button" class="botaoBuscaLateral" value="" />
                </div>
                <ul id="ulLateral">
                    <li class="bordaTopZero"><a href="">Ankle Boot</a></li>
                    <li><a href="">Botas</a></li>
                    <li><a href="">Oxford</a></li>
                    <li><a href="">Peep Toe</a></li>
                    <li><a href="">Rasteiras</a></li>
                    <li><a href="">Sandálias</a></li>
                    <li><a href="">Sapatilhas</a></li>
                    <li><a href="">Scarpins</a></li>
                    <li><a href="">Tênis & Esporte</a></li>
                    <li><a href="">Chinelos</a></li>
                    <li><a href="">Sapatênis</a></li>
                    <li class="bordaBottomZero"><a href="">Tênis & Esporte</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="banners_lateral">
                <a href=""><img src="_images/banner_lacoste.png" alt="" /></a>
                <a href=""><img src="_images/banner_lacoste2.png" alt="" /></a>
                <a href=""><img src="_images/banner_kildare.png" alt="" /></a>                                
            </div>
        </div>
        
        <div class="boxHome">
           	<h3>DESCRIÇÃO DO PRODUTO</h3>        		            
        </div>
        
		<div class="internas">
			
            <div id="page-wrap">
				<div class="slider-wrap">
                	<div id="main-photo-slider" class="csw">
                    	<div class="panelContainer">
            
                            <div class="panel" title="Panel 1">
                                <div class="wrapper">
                                    <img src="_images/produtos/detalheProduto.png" alt="temp" />
                                </div>
                            </div>
                            
                            <div class="panel" title="Panel 2">
                                <div class="wrapper">
                                    <img src="_images/produtos/detalheProduto.png" alt="temp" />
                                </div>
                            </div>		
                            
                            <div class="panel" title="Panel 3">
                                <div class="wrapper">
                                    <img src="_images/produtos/detalheProduto.png" alt="temp" />
                                </div>
                            </div>
                            
                            <div class="panel" title="Panel 4">
                                <div class="wrapper">
                                    <img src="_images/produtos/detalheProduto.png" alt="temp" />
                                </div>
                            </div>
                            
                            <div class="panel" title="Panel 5">
                                <div class="wrapper">
                                    <img src="_images/produtos/detalheProduto.png" alt="temp" />
                                </div>
                            </div>
                            
                            <div class="panel" title="Panel 6">
                                <div class="wrapper">
                                    <img src="_images/produtos/detalheProduto.png" alt="temp" />
                                </div>
                            </div>
                            
                        </div>
                    </div>
            
                    <div id="movers-row">
                    	<div>
                        	<a href="#1" class="cross-link active-thumb">
                                <img src="_images/produtos/sapatoPequeno.png" class="nav-thumb" alt="temp-thumb" />
                            </a>
                        </div>
                        <div>
                        	<a href="#2" class="cross-link">
                            	<img src="_images/produtos/sapatoPequeno.png" class="nav-thumb" alt="temp-thumb" />
                            </a>
                        </div>
                        <div>
                        	<a href="#3" class="cross-link">
                            	<img src="_images/produtos/sapatoPequeno.png" class="nav-thumb" alt="temp-thumb" />
                            </a>
                        </div>
                        <div>
                        	<a href="#4" class="cross-link">
                            	<img src="_images/produtos/sapatoPequeno.png" class="nav-thumb" alt="temp-thumb" />
                            </a>
                        </div>
                        <div>
                        	<a href="#5" class="cross-link">
                            	<img src="_images/produtos/sapatoPequeno.png" class="nav-thumb" alt="temp-thumb" />
                            </a>
                        </div>
                        <div>
                        	<a href="#6" class="cross-link">
                            	<img src="_images/produtos/sapatoPequeno.png" class="nav-thumb" alt="temp-thumb" />
                            </a>
                        </div>
                    </div>
            	</div>
                <div class="clear"></div>
            </div>
            
            <div class="contentDetalhe">
            	<p class="font6">Calvin Klein Anderson</p>
                <p class="font7">R$ 399,90</p>
                <p>ou 10x de <span>39,99</span></p>
                <p class="font8">
                	outras formas de pagamento
                    <img src="_images/seta-baixo.jpg" alt="" />
                </p>
                <p class="floatLeft"><strong>Escolha o tamanho</strong></p>
                <div class="clear"></div>
                <select>
                	<option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <div class="clear"></div>
                <input type="submit" value="" />
                <div class="clear"></div>
                <img src="_images/botoes/bt-frete.png" alt="" />
                
                <div class="clear"><br/></div>
                
            </div>
            
            <div class="clear"></div>
            
            <div class="texto">
            
            	<div class="linhaTexto"></div>
            
            	<div class="contentTexto">
            		<h3>Descriçao do Produto</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac lectus ut turpis posuere feugiat. Nulla ornare, velit at posuere fermentum, tortor lacus mattis dui, quis ornare est lacus a nisl. Etiam fermentum ultrices scelerisque. Aliquam aliquam porttitor justo a interdum. Praesent in massa quam. Fusce ornare accumsan nunc vel luctus. Integer nec erat quis justo aliquet consequat at congue mi. Suspendisse porttitor tincidunt dui, eget convallis erat tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc et erat ligula.</p>
				</div>
                   
                <div class="linhaTexto"></div>   
                                    
                <div class="contentTexto">
            		<h3>Descriçao Técnica do Produto</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac lectus ut turpis posuere feugiat. Nulla ornare, velit at posuere fermentum, tortor lacus mattis dui, quis ornare est lacus a nisl. Etiam fermentum ultrices scelerisque. Aliquam aliquam porttitor justo a interdum. Praesent in massa quam. Fusce ornare accumsan nunc vel luctus. Integer nec erat quis justo aliquet consequat at congue mi. Suspendisse porttitor tincidunt dui, eget convallis erat tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc et erat ligula.</p>
				</div>
                
                <div class="linhaTexto"></div>
                
                <div class="contentTexto">
            		<h3>garantia</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac lectus ut turpis posuere feugiat. Nulla ornare, velit at posuere fermentum, tortor lacus mattis dui, quis ornare est lacus a nisl. Etiam fermentum ultrices scelerisque. Aliquam aliquam porttitor justo a interdum. Praesent in massa quam. Fusce ornare accumsan nunc vel luctus. Integer nec erat quis justo aliquet consequat at congue mi. Suspendisse porttitor tincidunt dui, eget convallis erat tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc et erat ligula.</p>
				</div>
            	    
            </div>
            
        </div>
        
        <div class="clear"></div>
    </div>
    <div class="footer">
    	<div class="contentFooter">
        	<div class="boxFooter">
            	<div class="miniBox">
                	<ul>
                    	<li class="cetas"><a href="">Ankle Boot</a></li>
                        <li class="cetas"><a href="">Botas</a></li>
                        <li class="cetas"><a href="">Oxford</a></li>
                        <li class="cetas"><a href="">Peep Toe</a></li>
                        <li class="cetas"><a href="">Rasteiras</a></li>
                        <li class="cetas"><a href="">Sandálias</a></li>
                        <li class="cetas"><a href="">Sapatilhas</a></li>
                        <li class="cetas"><a href="">Scarpins</a></li>
                        <li class="cetas"><a href="">Tênis & Esporte</a></li>
                        <li class="cetas"><a href="">Chinelos</a></li>
                        <li class="cetas"><a href="">Sapatênis</a></li>
                        <li class="cetas"><a href="">Tênis & Esporte</a></li>
                    </ul>
                </div>
                <div class="miniBox">
                	<ul>
                    	<li><a href="">PÁGINA PRINCIPAL</a></li>
                        <li><a href="">CONTATO</a></li>
                        <li><a href="">QUEM SOMOS</a></li>
                    </ul>
                </div>
                <div class="linhaPequena">&nbsp;</div>
                <div class="miniBox">
                	<ul>
                    	<li><a href="">LOGIN</a></li>
                        <li><a href="">CADASTRE-SE</a></li>
                        <li><a href="">MEU CARRINHO</a></li>
                        <li><a href="">MEUS DADOS</a></li>
                        <li><a href="">MEUS PEDIDOS</a></li>
                    </ul>
                </div>
                <div class="linhaMedia">&nbsp;</div>
                <div class="medioBox">
                	<h2>ASSINE NOSSA NEWSLETTER</h2>
                    <input type="text" value="Seu Email" class="campoNewsletter" />
                    <input type="button" value="" class="botaoNewsletter" />
                </div>
            </div>
            <div class="divisorFooter">&nbsp;</div>
            <div class="boxFooter">
            	<div class="medioBox">
                	<h2>CENTRAL DE ATENDIMENTO</h2>
                    <div class="linha">
                        <img src="_images/telefone_header.png" alt="" />
                        <p>4004-0101</p>
                    </div>
                    <div class="linha">
                        <img src="_images/contato_reader.png" alt="" />
                        <p>contato@mencalcados.com.br</p>
                    </div>
                    <div class="linhaMedia">&nbsp;</div>
                </div>
                <div class="medioBox">
                	<h2>CONTATO DIRETO</h2>
                	<span>NOME</span>
                    <input type="text" value="" class="campoPequeno" />
                    <span>EMAIL</span>
                    <input type="text" value="" class="campoPequeno" />                    
                    <span>MENSAGEM</span>
                    <textarea class="campoGrande"></textarea>
                    <input type="submit" class="botaoContato" value="" />
                </div>
			</div>
            <div class="divisorFooter">&nbsp;</div>
            <div class="boxFooter">
            	<div class="medioBox">
                	<h2>ENTREGA</h2>
                    <img src="_images/bandeiras/entrega.png" alt="" />
                </div>
                <div class="linhaMedia">&nbsp;</div>                
                <div class="medioBox">
                	<h2>FORMAS DE PAGAMENTO</h2>
                    <div class="linhaFooter">
                        <p class="tamanho100">SEGURANÇA</p>
                        <img src="_images/bandeiras/seguranca.png" alt="" />
                    </div>
                    <div class="linhaFooter">
                        <p class="tamanho100">CRÉDITO</p>
                        <img src="_images/bandeiras/credito.png" alt="" />
                    </div>
                    <div class="linhaFooter">
                        <p class="tamanho100">DÉBITO</p>                    
                        <img src="_images/bandeiras/debito.png" alt="" />
                    </div>
                    <div class="linhaFooter">
                        <p class="tamanho100">BOLETO</p>                    
                        <img src="_images/bandeiras/boleto.png" alt="" />
                    </div>
                </div>
			</div>                                	
            <div class="clear"></div>
        </div>
    </div>        
    <div class="subFooter">
    	<div class="tamanho1000">
            <p>© 2011. paropas . Todos os Direitos Reservados.</p>
            <div class="miniLogo">&nbsp;</div>
        </div>
    </div>
</body>
</html>
